<template>
  <div class="foundation-frame-wrap">
    <iframe
      :src="frameUrl"
      frameborder="0"
      scrolling="no"
      id="bdIframe"
      allowfullscreen
    ></iframe>
    <wap-nav></wap-nav>

    <mt-popup
      v-if="queryDialogCompView"
      v-model="queryDialogCompView"
      :modal="false"
      popup-transition="popup-fade"
    >
      <img
        class="closeImg"
        src="../../../../assets/imgs/close1.png"
        width="42"
        @click="queryDialogCompClose"
      />
      <component :is="queryDialogComp" :anchorId="anchorId"></component>
    </mt-popup>
  </div>
</template>

<script>
import wapNav from "../common/wapNav"
import { mapState } from "vuex"
import anchorQuery from "../../common/anchorQuery"
import { Popup } from "mint-ui"

export default {
  mixins: [anchorQuery],
  components: {
    wapNav,
    Popup
  },
  data () {
    return {
      frameUrl: "https://showroom.covestro.com/foundation/3d/index.html",

      floor: "0"
    }
  },
  mounted () {
    // this.handle3DUrl()

    this.getFloor()
    this.handle3DUrl()
  },
  watch: {
    $route () {
      console.log("$route")
      this.getFloor()
      this.handle3DUrl()
      // this.handleQueryVideoIndex();
    },
    lang () {
      this.handle3DUrl()
    },
    queryDialogCompView (v) {
      if (!this.userInfo && v) {
        this.queryDialogCompView = false
        this.$router.replace('/foundation/wap/login')
      }
    }
  },
  computed: {
    ...mapState(["lang","userInfo"])
  },
  created () {
    this.handle3DUrl()
  },
  methods: {
    getFloor () {
      var floor = this.$route.query.floor
      if (floor != this.floor) {
        this.floor = floor
      }
    },
    handle3DUrl () {
      if (this.lang === "en") {
        this.frameUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=2&l=" +
          this.floor
      }
      if (this.lang === "zh") {
        this.frameUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=1&l=" +
          this.floor
      }
      if (this.lang === "de") {
        this.frameUrl =
          "https://showroom.covestro.com/3d/foundation/index.html?id=2&l=" +
          this.floor
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.foundation-frame-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .mint-popup {
    height: 100%;
    width: 100%;
    overflow: auto;
    /deep/.closeImg {
      position: absolute;
      top: 10px;
      right: 0;
      z-index: 3;
    }
  }
}
</style>
